/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/
@use '../../internal/styles/tokens' as awsui;
@use '../../internal/styles' as styles;

.sticky-scrollbar {
  block-size: 15px;
  position: sticky;
  display: none;
  overflow-x: auto;
  overflow-y: hidden;
  inset-block-end: 0;
  inline-size: 100%;

  &[data-stuck='false'] {
    clip-path: inset(-9999px 0 0 0 round awsui.$border-radius-container);
  }

  &-content {
    block-size: 15px;
  }
  &-visible {
    display: block;
  }
  &-native-invisible {
    // Native scrollbar does not take space when it is not always invisible
    // For example it is set as "show when scrolling"
    margin-block-start: -15px;
  }

  &-offset {
    // "offset" styles are needed for when sticky columns are enabled.
    // We move the scrollbar lower, so it doesn't overlap interactive elements (such as checkboxes or links)

    z-index: 799; // Higher than sticky columns (798) and lower than table sticky header (800)
    &:not(.is-visual-refresh) {
      background-color: awsui.$color-background-container-content;
      block-size: 15px;
      margin-block-start: calc(-1 * awsui.$border-divider-section-width); // -1px to compensate for border width
      border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
    }

    &.is-visual-refresh {
      // Needed to avoid sticky scrollbar overlapping with interactive elements in VR compact mode
      margin-block-start: -5px;
    }
  }
}

.is-visual-refresh {
  // Used for detecting Visual Refresh
}
